<template>
  <div ref="chart" style="height: 300px" />
</template>

<script>
import * as echarts from 'echarts'
const chart = {
  labelP: [],
  labelQ: [],
  labelI: []
}
export default {
  data () {
    return {
      chart: null,
      jsonData: [
        { id: 1, labelP: '1.001', labelQ: '1.147', labelI: '1.889' },
        { id: 2, labelP: '2.098', labelQ: '4.147', labelI: '0.889' },
        { id: 3, labelP: '2.018', labelQ: '2.047', labelI: '1.881' },
        { id: 4, labelP: '2.028', labelQ: '3.847', labelI: '3.089' },
        { id: 5, labelP: '1.038', labelQ: '8.147', labelI: '2.889' },
        { id: 6, labelP: '2.048', labelQ: '3.247', labelI: '0.283' },
        { id: 7, labelP: '3.058', labelQ: '5.147', labelI: '2.189' },
        { id: 8, labelP: '4.028', labelQ: '1.547', labelI: '1.385' },
        { id: 9, labelP: '5.018', labelQ: '1.147', labelI: '2.809' }
      ]
    }
  },
  mounted () {
    this.initData()
    this.initChart()
  },
  methods: {
    initData () {
      // console.log(this.jsonData)
      chart.labelP = this.jsonData.map(item => {
        return item.labelP
      })
      chart.labelQ = this.jsonData.map(item => {
        return item.labelQ
      })
      chart.labelI = this.jsonData.map(item => {
        return item.labelI
      })
    },
    initChart () {
      const chartEle = this.$refs.chart
      console.log(chartEle)
      if (chartEle !== null) {
        if (this.chart === null) {
          this.chart = echarts.init(chartEle)
        }
        const option = {
          grid: {
            top: '10%',
            bottom: '1.5%',
            left: '0.1%',
            right: '1.5%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [
              '有功', '无功', '电流'
            ],
            x: 'right',
            icon: 'circle',
            grid: '10%'
          },
          xAxis: { type: 'category', show: false, axisLabel: { interval: 0 } },
          yAxis: { type: 'value', show: true },
          series: [
            { name: '有功', data: chart.labelP, type: 'line' },
            { name: '无功', data: chart.labelQ, type: 'line' },
            { name: '电流', data: chart.labelI, type: 'line' }
          ]
        }
        console.log(option)
        this.chart.setOption(option)
      }
    }
  }
}
</script>
